/*
 * @Author: Zeratul
 * @Date: 2020-08-19 17:16:48
 * @LastEditTime: 2020-08-24 16:30:45
 * @FilePath: \sz-h5-2003-react-mobile\zhangminhui\eleme-react\eleme-user\src\pages\LoginPage\index.js
 */
import React, { Component } from "react";
import { withRouter, Redirect } from "react-router-dom";
import { connect } from "react-redux";

import {
  changeInputPasswordAction,
  changeInputTelAction,
  handleLoginAction,
  getCodeAction,
} from "../../store/actionCreator/index";
import styles from "./index.module.scss";
class LoginPage extends Component {

  render() {
    if (this.props.isLogin) {
      return <Redirect to="/user"></Redirect>;
    } else {
      return (
        <div>
          <div className={styles.loginBox}>
            <div className={styles.TopNav}>
              <div className={styles.topNavLeft}>
                <svg
                  className={styles.icon}
                  aria-hidden="true"
                  onClick={() => {
                    this.props.history.push("/user");
                  }}
                >
                  <use href="#icon-zuojiantou"></use>
                </svg>
              </div>
              <div className={styles.topNavCenter}></div>
              <div className={styles.topNavRight}></div>
            </div>
            <div className={styles.loginImg}>
              <div className={styles.userimg}>
                <svg className={styles.icon} aria-hidden="true">
                  <use href="#icon-chidacan"></use>
                </svg>
              </div>
            </div>
            <div className={styles.loginInput}>
              <div className={styles.tel}>
                <label>
                  <svg className={styles.icon} aria-hidden="true">
                    <use href="#icon-mingpian"></use>
                  </svg>
                </label>
                <input
                  className={styles.inputTel}
                  placeholder={this.props.inpNamePH}
                  onChange={this.props.changeInputTel.bind(this)}
                  value={this.props.inputTel}
                ></input>
                <span
                  className={styles.getCode}
                  onClick={this.props.getCode.bind(this, this.props.inputTel)}
                >
                  获取验证码
                </span>
              </div>
              <div className={styles.pwd}>
                <label>
                  <svg className={styles.icon} aria-hidden="true">
                    <use href="#icon-suo"></use>
                  </svg>
                </label>
                <input
                  type="password"
                  className={styles.inputPassword}
                  placeholder={this.props.inputPasswordPH}
                  onChange={this.props.changeInputPassword.bind(this)}
                  value={this.props.inputPassword}
                ></input>
              </div>

              <div className={styles.goToRegister}>
                <span
                  onClick={() => {
                    this.props.history.push("/regist");
                  }}
                >
                  {this.props.register}
                </span>
                <span>{this.props.forgetPwd}</span>
              </div>
              <button
                onClick={this.props.handleLoginClick.bind(
                  this,
                  this.props.inputTel,
                  this.props.inputPassword,
                  this.props.code
                )}
              >
                登录
              </button>
              <div>
                默认同意<a href="https://h5.ele.me/service/agreement/#HEAEDER_SHOW=1&initTitle=%E9%9A%90%E7%A7%81%E6%94%BF%E7%AD%96&key=ruleQue50">《用户服务协议》</a>和
                <a href="https://h5.ele.me/service/agreement/#HEAEDER_SHOW=1&initTitle=%E9%9A%90%E7%A7%81%E6%94%BF%E7%AD%96&key=ruleQue50">《隐私权政策》</a>
              </div>
            </div>
          </div>
        </div>
      );
    }
  }
}
const mapStateToPorps = (state) => {
  return {
    isLogin: state.loginReducer.isLogin,
    inpNamePH: state.loginReducer.inpNamePH,
    inputPasswordPH: state.loginReducer.inputPasswordPH,
    forgetPwd: state.loginReducer.forgetPwd,
    register: state.loginReducer.register,
    inputTel: state.loginReducer.inputTel,
    inputPassword: state.loginReducer.inputPassword,
    code: state.loginReducer.code,
  };
};
const mapDispatchToProps = (dispatch) => {
  return {
    changeInputTel(e) {
      dispatch(changeInputTelAction(e.target.value));
    },
    changeInputPassword(e) {
      dispatch(changeInputPasswordAction(e.target.value));
    },
    handleLoginClick: function (inpTelVal, inpPasswordVal, code) {
      dispatch(handleLoginAction(inpTelVal, inpPasswordVal, code));
    },
    getCode: function (inpTelVal) {
      dispatch(getCodeAction(inpTelVal));
    },
  };
};

export default withRouter(
  connect(mapStateToPorps, mapDispatchToProps)(LoginPage)
);
